<!--
  tablePropList table要展示的映射字段
  tableData table展示的数据信息
  showIndexColum 是否展示复选框和序号
  headerTxt table表格的标题 选填
 -->

<template>
  <div class="header">
    <div class="headerTxt">
      {{ headerTxt }}
    </div>
    <div class="header-handler">
      <slot name="header-handler"> </slot>
    </div>
  </div>
  <div class="table">
    <el-table
      :data="tableData"
      border
      class="el-table"
      stripe
      @selection-change="handleSelectionChange"
      v-bind="childrenProps"
    >
      <!-- 复选框 -->
      <el-table-column v-if="showIndexColum" type="selection" align="center"></el-table-column>
      <!-- 序号 -->
      <el-table-column
        v-if="showIndexColum"
        type="index"
        align="center"
        width="60px"
        label="序号"
      ></el-table-column>

      <!-- 展示的数据 -->
      <template v-for="propItem in tablePropList" :key="propItem.prop">
        <el-table-column
          v-bind="propItem"
          align="center"
          v-if="!propItem.showPosition"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <!-- 使用插槽作用域去抛出本行的数据 -->
            <slot :name="propItem.slotName" :prop="row">
              {{ row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>

        <!--
          实现操作列悬停 如果showPosition有值 可以修改悬停位置 left or right 如果无数据 操作按钮就不能实现悬停
        -->
        <el-table-column v-bind="propItem" align="center" :fixed="propItem.showPosition" v-else>
          <template #default="{ row }">
            <slot name="operate" :prop="row">
              <el-button
                size="small"
                link
                :disabled="row.enable === 0"
                :icon="Edit"
                @click="editClick(row)"
              >
                Edit
              </el-button>
              <el-button size="small" link type="danger" :icon="Delete" @click="delClick(row)"
                >Delete</el-button
              >
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
  <div class="bottom" v-if="showPagination">
    <yc-pagination
      :total="dataCount"
      @handle-current-page="handleCurrentPage"
      @handle-size-change="handleSizeChange"
    />
  </div>
</template>

<script setup lang="ts">
import YcPagination from '@/base-ui/pagination'
import { Edit, Delete } from '@element-plus/icons-vue'
interface Props {
  tablePropList: any[]
  tableData: any[]
  showIndexColum: boolean
  headerTxt?: string
  dataCount: number
  pageSizes?: any[]
  childrenProps?: any
  showPagination?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  tablePropList: () => [],
  tableData: () => [],
  headerTxt: '列表',
  childrenProps: () => ({}),
  showPagination: true
})

/* BUG table进度条
  const rowStyle = ({ row }) => {
  return { '--process': `${row.progress * 10}%` }
} */
const emit = defineEmits([
  'selectChange',
  'handleSizeChange',
  'handleCurrentPage',
  'editClick',
  'delClick'
])
function handleSelectionChange(value: any) {
  // 复选框
  emit('selectChange', value)
}

function handleCurrentPage(page: number) {
  // pagination
  emit('handleCurrentPage', page)
}
function handleSizeChange(size: number) {
  emit('handleSizeChange', size)
}

function editClick(row: any) {
  emit('editClick', row)
}
function delClick(row: any) {
  emit('delClick', row)
}
</script>

<style lang="less" scoped>
.header {
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  .headerTxt {
    font-weight: 600;
    padding-left: 8px;
  }
  .header-handler {
    padding-right: 8px;
  }
}
.table {
  // BUG 进度条样式
  /*   .el-table {
    position: relative;

    /deep/.el-table__row {
      position: relative;
      &::after {
        content: '';
        background-color: #409eff !important;
        position: absolute;
        height: 3px;
        left: 0;
        bottom: 0;
        width: var(--process);
      }
      // content: '';
      // transition: width 0.3 ease;

      // height: 3px;
      // position: absolute;
      // bottom: 0;
      // left: 0;
    }
  } */
}
.bottom {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}
</style>
